<template>
  <div>
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :key="category.top.id" v-if="category.top" :to="`/category/${category.top.id}`"
        >{{category.top.name}}</el-breadcrumb-item
        >
        <transition name="fade-right" mode="out-in">
        <el-breadcrumb-item :key="category.sub.id" v-if="category.sub">{{category.sub.name}}</el-breadcrumb-item>
      </transition>
    </el-breadcrumb>
    <el-card class="card">
      <div>
        <SubFilter @filter-change="filterChange"></SubFilter>
      </div>
    </el-card>
    <el-card class="card">
      <div>
        <SubSort @sort-change = "sortChange"></SubSort>
        <!-- <InfiniteLoading :loading="loading" :finished="finished" @infinite="getData" /> -->
        <SubInfiniteLoading :loading="loading" :noMore="noMore" @infinie="getData" :key="$route.params.id">
          <!-- <ul> -->
            <li v-for="goods in goodsList" :key="goods.id" class="goodsList">
              <GoodsItem :goods="goods"></GoodsItem>
            </li>
          <!-- </ul> -->
        </SubInfiniteLoading>
      </div>
    </el-card>
  </div>
</template>
<script>
import { ref, watch } from 'vue'
import SubFilter from './sub-filter.vue'
import SubSort from './sub-sort.vue'
// import InfiniteLoading from '../../../components/infinite-loading.vue'
import SubInfiniteLoading from './sub-InfiniteLoading.vue'
import GoodsItem from './goods-item.vue'
import { computed } from '@vue/reactivity'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { findSubCategoryGoods } from '../../../api/category'

export default {
  name: 'SubBread',
  setup () {
    // 通过计算属性从vuex获取顶级和二级类目信息
    // 数据对象：{top:{id,name},sub:{id,name}}
    const route = useRoute()
    const store = useStore()
    const category = computed(() => {
      const cate = {}
      store.state.category.list.forEach(top => {
        // 如果二级类目有children则可以查询 三级类目
        if (top.children) {
          const sub = top.children.find(sub => {
            return sub.id === route.params.id
          })
          if (sub) {
            // 如果存在sub 则说明找到了三级类目
            cate.top = { id: top.id, name: top.name }
            cate.sub = { id: sub.id, name: sub.name }
          }
        }
      })
      return cate
    })
    // 商品列表数据
    const goodsList = ref([])
    const loading = ref(false)
    const noMore = ref(false)
    // 请求参数
    let reqParams = {
      page: 1,
      pageSize: 20
    }
    const getData = () => {
      loading.value = true
      // 设置二级分类的ID
      reqParams.categoryId = route.params.id
      findSubCategoryGoods(reqParams).then(({ result }) => {
        // console.log(result.items.length)
        if (result.items.length) {
          goodsList.value.push(...result.items)
          // 把page+1
          // if (result.items.length === reqParams.pageSize) {
          reqParams.page++
          // } else {
          //   noMore.value = true
          // }
        } else {
          // 没有数据
          noMore.value = true
        }
        loading.value = false
      }).catch((err) => {
        console.log(err)
      })
      // console.log('加载')
    }
    // 监视id变化
    watch(() => route.params.id, (newVal) => {
      if (newVal && `/category/sub/${newVal}` === route.path) {
        // getData()
        noMore.value = false
        // 重置goodsList数组
        goodsList.value = []
        reqParams = {
          page: 1,
          pageSize: 20
        }
        // getData()
      }
    })
    // 更改排序组件的筛选数据 重新请求
    const sortChange = (sortParams) => {
      // console.log(sortParams)
      // 未完成 加载
      noMore.value = false
      // 合并参数 保留当前参数
      reqParams = { ...reqParams, ...sortParams }
      // 更改条件要回到第一页
      reqParams.page = 1
      goodsList.value = []
    }
    // 2：更改筛选组件的筛选数据 重新请求
    const filterChange = (filterParams) => {
      // console.log(filterParams)
      noMore.value = false
      // 合并请求参数，保留之前参数
      reqParams = { ...reqParams, ...filterParams }
      // 更改到第一页
      reqParams.page = 1
      if (!goodsList.value) {
        noMore.value = true
      }
      goodsList.value = []
    }
    return { category, getData, goodsList, noMore, loading, sortChange, filterChange }
  },
  components: {
    SubFilter,
    SubSort,
    SubInfiniteLoading,
    GoodsItem
    // InfiniteLoading
  }
}
</script>
<style lang="less" scoped>
.fade-right-enter-from{
  transform: translateX(20px);
  opacity: 0;
}
.fade-right-enter-active{
  transition: all 1s ease;
}
.fade-right-enter-to{
  transform: translateX(0);
  opacity: 1;
}
.fade-right-leave-from{
  transform: translateX(0);
  opacity: 1;
}
.fade-right-leave-to{
  transform: translateX(-20px);
  opacity: 0;
}
.breadcrumb{
  padding-top: 20px;
  padding-bottom: 20px;
}
.breadcrumb{
  padding-left: 180px;
}
.card{
   margin-left: 180px;
   margin-right: 180px;
}
// .goodsList{
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }
</style>
